<!--
 * @Description:登录，注册页面
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-4-24 14:15:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-13 12:04:03
-->
<template>
	<view class="login-page">
		<c-status-bar />
		<view class="open-app" v-if="openAppTitle">
			<text>{{ $t('login.loginOther.openAPP') }}</text>
			<u-button @click="openApp" class="open-btn">{{ $t('login.loginOther.open') }}</u-button>
		</view>
		<!-- 登录页面头部 -->
		<view class="login-header">
			<!-- <view class="nav-back" @click="goBack">
				<image style="width:100rpx;height: 100rpx;" src="@/static/images/login/box-arrows.png" mode=""></image>
			</view> -->
			<view class=""></view>
			<!-- <view class="login-logo">
				<text class="while">L</text>
				<text class="blue">O</text>
				<text class="while">G</text>
				<text class="blue">O</text>
			</view> -->
			<image class="customer-service-logo" style="width: 48rpx; height: 48rpx"
				src="@/static/images/login/customer-service.png" @click="clickService"></image>
		</view>
		<!-- 登录注册表单 -->

		<view class="login-main">
			<view class="login-form">
				<!-- 登录注册都有的部分 -->
				<view class="title-text">
					<view class="tips-text">
						<template v-if="activeFormType === 'login'">
							{{ $t('login.signIn') }}
						</template>
						<template v-if="activeFormType === 'register'">
							<view class="register-text">
								<view class="">
									{{ $t('login.createNew') }}
									<br />
									{{ $t('login.account') }}
								</view>
								<view class="other-dex" v-if="otherInfo.status">
									<ul>
										<li>
											<text>{{ otherInfo.name }}{{ $t('login.loginOther.User') }}</text>
											<text class="other-name">{{ otherInfo.userName }}</text>
										</li>
										<li>
											{{ $t('login.loginOther.Visiting') }}
										</li>
										<li>
											{{ $t('login.loginOther.binding') }}
										</li>
									</ul>
								</view>
							</view>
						</template>
						<template v-if="activeFormType === 'forget'">
							<view class="forgetTittle">
								{{ forgetTittle }}
							</view>
							<view class="forgetContent">
								{{ forgetContent }}
							</view>
						</template>
					</view>
					<!-- 语言选择 -->
					<view class="select" v-show="activeFormType === 'login'">
						<selectDown :data="languageAll" :value="languageVal" @change="languageChange"></selectDown>
					</view>
				</view>
				<template>
					<!-- 登录 -->
					<view class="form-login" v-show="activeFormType === 'login'">
						<!-- 选择登录方式 -->
						<view class="loginTab">
							<view :class="['loginTabItem',`${loginTabActive==index?'active':''}`]"
								v-for="(item,index) in loginTabItem" :key="index" @click="loginTab(index)">
								{{item}}
							</view>
						</view>
						<view>
							<view v-if="loginTabActive==0" class="input-box" v-for="(item, index) in loginInputList" :key="item.val">
								<titleInput :ref="item.key + 'Input'" :maxlength="item.maxlength" v-model="loginData[item.key]"
									:valKey="item.key" :type="item.key === 'password' ? 'password' : 'text'" :rule="item.rule"
									:title="$t('login.loginInputList[' + index + '].val')" @enter="loginEnter(item.key)">
								</titleInput>
							</view>
							<view class="input-box" v-if="loginTabActive==1">
								<view class="input-box" style="display: flex;align-items: center;justify-content: space-between;">
									<view class="areaCodeBox">
										<text class="areaCodeText">{{$t('addAddress.country')}}</text>
										<areaCode ref="areaCode2" @getAreaId='asss' :phoneAreaNumber='phoneAreaNumber'>
										</areaCode>
									</view>
									<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="11" valKey="telphone" type="number"
										v-model="loginData.phone" :title="$t('login.reigsterInputList[3].val')">
									</titleInput>
								</view>
								<titleInput class="input-box" :rule="'\\W'" :maxlength="16" valKey="password" type="password"
									v-model="loginData.password" :title="$t('login.reigsterInputList[1].val')">
								</titleInput>
							</view>
						</view>
						<u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox v-model="rememberPwd">{{$t('login.remember_password')}}</u-checkbox>
						</u-checkbox-group>
					</view>
					<!-- 注册 -->
					<view class="form-reigster" v-show="activeFormType === 'register'">
						<view class="" style="margin-bottom: 20rpx;text-align: center">
							<u-avatar :src="$u.file.getMedieUrl(registerData.avatar)" mode='circle' size="140" @click="changeAvatar()"
								style=""></u-avatar>
						</view>

						<titleInput class="input-box" :rule="'[^\\w]'" :maxlength="12" valKey="username"
							v-model="registerData.username" :title="$t('login.reigsterInputList[0].val')">
							<view class="" slot='right-icon' style="padding: 0 20rpx;" v-if="checkName==2">
								<u-icon name="checkmark-circle-fill" size="36" color="#00aa00"></u-icon>

							</view>
						</titleInput>
						<view class="" v-if="checkName==1" style="color: #f00;margin: 20px;display: flex;align-items: center;">
							<u-icon name="close-circle-fill" size="36" color="#f00"></u-icon> {{$t('login.UserPresence')}}
						</view>
						<!-- <titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="11" valKey="telphone" type="number"
							v-model="phoneNumber" :title="$t('login.reigsterInputList[3].val')">
							<view class="" slot="left-icon">
								<areaCode ref="areaCode2" @getAreaId='asss' :phoneAreaNumber='phoneAreaNumber'></areaCode>
							</view>

						</titleInput> -->
						<!-- <view class="input-box"
							style="display: flex;align-items: center;justify-content: space-between;">
							<view class="areaCodeBox">
								<text class="areaCodeText">{{$t('addAddress.country')}}</text>
								<areaCode ref="areaCode2" @getAreaId='asss' :phoneAreaNumber='phoneAreaNumber'>
								</areaCode>
							</view>
							<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="11" valKey="telphone"
								type="number" v-model="phoneNumber" :title="$t('login.reigsterInputList[3].val')">
							</titleInput>
						</view> -->
						<!-- <titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="6" valKey="captcha" type="number"
							v-model="registerData.smsCode" :title="$t('login.reigsterInputList[4].val')">
							<view class="" slot="right-icon">
								<u-verification-code :seconds="seconds" ref="uCode" changeText="xs"
									:start-text="$t('login.loginOther.send')" :end-text="$t('login.loginOther.regain')"
									@change="codeChange"></u-verification-code>
								<u-button @tap="getCode" style="color: #2934d0">{{ tips }}</u-button>
							</view>
						</titleInput> -->

						<titleInput class="input-box" :rule="'[^\\w]'" :maxlength="16" valKey="password" type="password"
							v-model="registerData.password" @input="handleInput" :title="$t('login.reigsterInputList[1].val')">
						</titleInput>
						<view class="strengthBox">
							<view :class="['strengthItem','strengthItem0',strength>=1?'strengthItemWeak':' '] "></view>
							<view :class="['strengthItem','strengthItem1',strength>=2?'strengthItemMiddle':''] "></view>
							<view :class="['strengthItem','strengthItem2',strength==3?'strengthItemStrong':''] "></view>
						</view>
						<view class="" style="font-size: 25rpx;padding-bottom: 30rpx;text-indent: 10rpx;">
							{{pwdStrength}}
						</view>
						<!-- 	<titleInput class="input-box" :rule="'/[\W]/g'" valKey="email " v-model="registerData.email "
							:title="$t('storeManagement.MailBox')"></titleInput> -->
						<titleInput class="input-box" :rule="'/[\W]/g'" valKey="inviteCode" v-model="registerData.inviteCode"
							:title="$t('login.reigsterInputList[2].val')">
						</titleInput>
						<view class="isagree">
							<u-checkbox-group @change="isagree" size="32">
								<u-checkbox v-model="isagreeCheck">
									<text @click.stop class="isagreeText"
										style="color: #999CAD;font-size: 24rpx;">{{$t('login.agree')}}</text>
									<text @click.stop="isagreeView(1)" class="isagreeText"
										style="color: #2934D0;font-size: 24rpx;">{{$t('login.user_agreement')}}</text>
									<text @click.stop class="isagreeText"
										style="color: #2934D0;font-size: 24rpx;">{{$t('login.and')}}</text>
									<text @click.stop="isagreeView(2)" class="isagreeText"
										style="color: #2934D0;font-size: 24rpx;">{{$t('login.privacy_policy')}}</text>
								</u-checkbox>
							</u-checkbox-group>

						</view>
					</view>
					<!-- 绑定手机号 -->
					<view class="form-reigster" v-show="activeFormType === 'bindingPhone'">



						<view class="input-box" style="display: flex;align-items: center;justify-content: space-between;">
							<view class="areaCodeBox">
								<text class="areaCodeText">{{$t('addAddress.country')}}</text>
								<areaCode ref="areaCode2" @getAreaId='asss' :phoneAreaNumber='phoneAreaNumber'>
								</areaCode>
							</view>
							<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="11" valKey="telphone" type="number"
								v-model="bindData.phone" :title="$t('login.reigsterInputList[3].val')">
							</titleInput>
						</view>
						<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="6" valKey="captcha" type="number"
							v-model="bindData.smsCode" :title="$t('login.reigsterInputList[4].val')">
							<view class="" slot="right-icon">
								<u-verification-code :seconds="seconds" ref="uCode2" changeText="xs"
									:start-text="$t('login.loginOther.send')" :end-text="$t('login.loginOther.regain')"
									@change="codeChange"></u-verification-code>
								<u-button @tap="getCode" style="color: #2934d0">{{ tips }}</u-button>
							</view>
						</titleInput>



					</view>
					<!-- 绑定邮箱 -->
					<view class="form-reigster" v-show="activeFormType == 'bindingMail'">
						<titleInput class="input-box" :rule="'/[\W]/g'" valKey="email " v-model="bindData.email "
							:title="$t('storeManagement.MailBox')"></titleInput>
						<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="6" valKey="captcha" type="number"
							v-model="bindData.emailSmsCode" :title="$t('login.reigsterInputList[4].val')">
							<view class="" slot="right-icon">
								<u-verification-code :seconds="seconds" ref="uCode3" changeText="xs"
									:start-text="$t('login.loginOther.send')" :end-text="$t('login.loginOther.regain')"
									@change="codeChange"></u-verification-code>
								<u-button @tap="getCode3" style="color: #2934d0">{{ tips }}</u-button>
							</view>
						</titleInput>



					</view>

					<!-- 忘记密码 -->
					<view class="form-login" v-show="activeFormType === 'forget'">
						<view class="input-box">

							<titleInput class="input-box" :rule="'[^\\w]'" :maxlength="12" valKey="username"
								v-model="forgetData.username" :title="$t('login.reigsterInputList[0].val')">

							</titleInput>
							<view class="" v-if="forgetCheckName==1"
								style="color: #f00;margin: 20px;display: flex;align-items: center;">
								<u-icon name="close-circle-fill" size="36" color="#f00"></u-icon> {{$t('login.UserPresence1')}}
							</view>
							<view class="" v-if="forgetType=='true'" style="margin-bottom: 14px;">
								<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="11" valKey="telphone" type="number"
									v-model="phoneNumber" :title="$t('login.reigsterInputList[3].val')">
									<view class="" slot="left-icon">
										<!-- <view class="" @click="showAreaCode = true" style="width: 200rpx">+{{ phoneAreaNumber }}</view> -->

										<areaCode ref="areaCode" @getAreaId='asss' :phoneAreaNumber='phoneAreaNumber'>
										</areaCode>
									</view>
								</titleInput>

								<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="6" valKey="captcha" type="number"
									v-model="forgetData.smsCode" :title="$t('login.reigsterInputList[4].val')">
									<view class="" slot="right-icon">
										<u-verification-code :seconds="seconds" ref="uCode" changeText="xs"
											:start-text="$t('login.loginOther.send')" :end-text="$t('login.loginOther.regain')"
											@change="codeChange"></u-verification-code>
										<u-button @tap="getCode2" style="color: #2934d0">{{ tips }}</u-button>
									</view>
								</titleInput>

							</view>
							<view class="" v-else style="margin-bottom: 14px;">
								<titleInput class="input-box" :rule="'/[\W]/g'" valKey="email " v-model="forgetData.email "
									:title="$t('storeManagement.MailBox')"></titleInput>
								<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="6" valKey="captcha" type="number"
									v-model="forgetData.emailCode" :title="$t('login.reigsterInputList[4].val')">
									<view class="" slot="right-icon">
										<u-verification-code :seconds="seconds" ref="uCode3" changeText="xs"
											:start-text="$t('login.loginOther.send')" :end-text="$t('login.loginOther.regain')"
											@change="codeChange"></u-verification-code>
										<u-button @tap="getCode3" style="color: #2934d0">{{ tips }}</u-button>
									</view>
								</titleInput>
							</view>

							<titleInput class="input-box" :rule="'\\W'" :maxlength="16" valKey="password" type="password"
								v-model="forgetData.password" :title="$t('login.reigsterInputList[1].val')"></titleInput>
							<titleInput class="input-box" :rule="'\\W'" :maxlength="16" valKey="password" type="password"
								v-model="forgetData.rePassword" :title="$t('login.reigsterInputList[5].val')"></titleInput>
						</view>


						<u-button class="handel-button" @click="bottomSubmit"
							:style="`margin-bottom:${activeFormType === 'login' ? '0' : '30rpx'} ;`" type="default">
							{{ $t('login.Verify') }}
						</u-button>
					</view>
				</template>
				<u-button v-if="activeFormType ==='login'||activeFormType ==='register'" class="handel-button"
					@click="bottomSubmit" :style="`margin-bottom:${activeFormType === 'login' ? '0' : '30rpx'} ;`" type="default">
					{{ activeFormType === 'login' ? $t('login.login') : $t('login.createAccount') }}
				</u-button>
				<u-button type="primary" v-if="activeFormType === 'bindingPhone'" style="margin: 20px 0;"
					@click="BindingPhone_create()">{{$t('login.BindMobile')}}</u-button>
				<u-button type="primary" v-if="activeFormType === 'bindingMail'" style="margin: 20px 0;"
					@click="BindingMail_create()">{{$t('login.BindMail')}}</u-button>
				<view class="forget" @click="forgetPsw" v-if="activeFormType !='forget'">
					<view class="" v-if="activeFormType === 'login'">{{ $t('login.forgetPsw') }}</view>
				</view>
			</view>
			<view class="switchover-form-text">
				<view class="shadow-box"></view>
				<p>
					{{ activeBottomTip.tip }}
					<span @click="formTypeChange(activeBottomTip.linkType)">{{ activeBottomTip.link }}</span>
				</p>
			</view>
		</view>
		<view class="login-with" v-if="activeFormType !='forget'">
			<text>{{ activeFormType === 'login' ? $t('login.loginOther.tips') : $t('login.loginOther.tips2') }}</text>
		</view>
		<!-- 底部三方登录 -->
		<otherLogin v-if="activeFormType !='forget'" @success="otherLogin"></otherLogin>
		<!-- 		<button type="default" @click="goUserCenter">{{$t('login.userCenter')}}</button>
 -->
		<promptDialog ref="promptDialog"></promptDialog>



		<!-- 客服弹窗 -->
		<u-popup v-model="customerServiceShow" mode="bottom" border-radius="14" height="520rpx">
			<view class="customerServiceBox">
				<view class="" style="width: 100%;height: 40rpx;text-align: center;">
					{{$t('user.customerService')}}
				</view>
				<view class=""
					style="width: 100%;height: 80rpx;text-align: center;margin: 40rpx 0;font-size: 12px;color: #ccc;">
					<p> {{$t('user.customerServiceTips1')}}</p>
					<p> {{$t('user.customerServiceTips2')}}</p>
				</view>
				<view class="" style="display: flex; justify-content: space-around;">
					<view class="" @click="publicJS.noOpen(()=>toCustomer(urlList[0]))">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs2.png')" />
						</view>
						<view class="">
							Support
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[1])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs3.png')" />
						</view>
						<view class="">
							Telegram
						</view>
					</view>
					<view class="" @click="toCustomer(urlList[2])">
						<view class="iconBox">
							<image style="width: 60rpx; height: 60rpx;" referrerpolicy="no-referrer"
								:src="require('@/static/images/cs1.png')" />
						</view>
						<view class="">
							WhatsApp
						</view>
					</view>

				</view>
			</view>
		</u-popup>

		<!-- <u-select @confirm="confirmArea" v-model="showAreaCode" :list="countries" value-name="tel" label-name="country"></u-select> -->
		<!-- 用户协议、隐私政策 -->
		<u-popup v-model="isShow" mode="center" width="85%" height="80%" style="text-align: justify;font-size: 24rpx;"
			closeable>
			<view class="" style="text-align: center;padding: 20rpx;">
				{{contentName}}
			</view>
			<view style="padding: 20rpx;">{{contentTitle}}</view>
			<view class="" style="padding:5rpx 20rpx;">
				<view class="">
					{{contentMain}}
				</view>
			</view>
		</u-popup>
		<!-- 是否绑定手机号 -->
		<u-popup v-model="showBindingPhone" border-radius="40" mode="center" width="85%">
			<view class="popBox">
				<image style="width: 260rpx; height: 260rpx;" referrerpolicy="no-referrer"
					:src="require('@/static/images/popIcon.png')" />
				<view class="popMessage">
					{{$t('login.BindMobileTips')}}
				</view>
				<u-button type="primary" style="margin: 20px 0;" @click="BindingPhone()">{{$t('login.BindMobile')}}</u-button>
				<u-button type="" @click="EnterMall()">{{$t('login.EnterMall')}}</u-button>
			</view>
		</u-popup>

		<!-- 是否绑定邮箱 -->
		<u-popup v-model="showBindingMail" border-radius="40" mode="center" width="85%">
			<view class="popBox">
				<image style="width: 260rpx; height: 260rpx;" referrerpolicy="no-referrer"
					:src="require('@/static/images/popIcon.png')" />
				<view class="popMessage">
					{{$t('login.BindMailTips')}}
				</view>
				<u-button type="primary" style="margin: 20px 0;" @click="BindingMail()">{{$t('login.BindMail')}}</u-button>
				<u-button type="" @click="EnterMall()">{{$t('login.EnterMall')}}</u-button>
			</view>
		</u-popup>
	</view>
</template>


<script>
	// #ifdef H5
	import comboxSearch from "@/components/cuihai-combox/cuihai-combox.vue"
	// #endif
	import COS from '@/static/js/COS.js'
	import {
		log
	} from "mathjs";
	import otherLogin from './component/otherLogin.vue'
	export default {
		components: {
			otherLogin
		},
		data() {
			return {
				strength: 0, //密码强度
				isShow: false, //用户协议、隐私政策
				contentTitle: '', //用户协议标题
				contentMain: '', //用户协议内容	
				contentName: '',
				isagreeCheck: false, //用户协议。。。
				rememberPwd: false, //记住密码
				loginTabItem: [
					this.$t('login.Account_login'), this.$t('login.Mobile_login')
				],
				loginTabActive: 0,
				keyName: 'gggg',
				form: {
					zhiweiId: '', //职位id
				},
				checkName: 0,
				forgetCheckName: 0,
				phoneAreaNumber: 1,
				showAreaCode: false,
				countries: [],
				country: [],
				tel: [],
				list: ['xixi', 'hahah', 'ggg'],
				forgetTittle: 'Enter new password',
				forgetContent: 'Note Remember the new password after entering it to facilitate subsequent operations. The two passwords must be the same; otherwise, the password cannot be saved successfully.',
				activeFormType: 'login',
				forgetType: 'true',
				languageVal: uni.getLocale(),
				// 全部语言
				languageAll: [{
						name: this.$t('local.zhs'),
						code: 'zh-Hans',
						imgSrc: ''
					},
					{
						code: 'en',
						name: this.$t('local.en'),
						imgSrc: ''
					}
				],
				// 登录输入框组
				loginInputList: [{
						val: this.loginTabActive == 0 ? this.$t('login.loginInputList[0].val') : this.$t(
							'login.loginInputList1[0].val'),
						key: 'username',
						maxlength: 12,
						rule: '[^\\w@.]'
					},
					{
						val: this.loginTabActive == 0 ? this.$t('login.loginInputList[1].val') : this.$t(
							'login.loginInputList1[1].val'),
						key: 'password',
						maxlength: 16,
						rule: '\\W'
					}
				],
				// 注册输入框组
				reigsterInputList: [{
						val: this.$t('login.reigsterInputList[0].val'),
						key: 'username',
						maxlength: 12,
						rule: '[^\\w@.]'
					},
					{
						val: this.$t('login.reigsterInputList[1].val'),
						key: 'password',
						maxlength: 16,
						rule: /[\W]/g
					},
					{
						val: this.$t('login.reigsterInputList[2].val'),
						key: 'inviteCode',
						rule: /[\W]/g
					}
				],
				// 验证码
				tips: '',
				// refCode: null,
				seconds: 10,
				bottomTipList: [{
						tip: this.$t('login.bottomTipList[0].tip'),
						link: this.$t('login.bottomTipList[0].link'),
						type: 'login',
						linkType: 'register'
					},
					{
						tip: this.$t('login.bottomTipList[1].tip'),
						link: this.$t('login.bottomTipList[1].link'),
						type: 'register',
						linkType: 'login'
					}
				],
				phoneNumber: '',
				// 注册数据
				registerData: {
					username: '',
					password: '',
					inviteCode: '',
					avatar: '',
					email: '',
					type: 1
				},
				bindData: {
					smsCode: '',
					phone: '',
					email: '',
					emailSmsCode: '',
				},
				// 忘记密码数据
				forgetData: {
					username: '',
					password: '',
					rePassword: '',
					smsCode: '',
					phone: '',
					email: '',
					emailCode: '',
					type: 4
				},
				// 登录数据
				loginData: {
					username: '',
					password: '',
					phone: ''
				},
				// 忘记密码验证
				forgetRules: {
					username: [{
							required: true,
							msg: this.$t('login.loginOther.nametip')
						},
						// {
						// 	reg: /^.{6,12}$/,
						// 	msg: this.$t('login.userNameError')
						// }
					],
					password: [{
							required: true,
							msg: this.$t('login.loginOther.passtip')
						},
						{
							reg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,16}$/,
							msg: this.$t('modify.ruleInfo')
						}
					],
					rePassword: [{
							required: true,
							msg: this.$t('login.loginOther.passtip')
						},
						{
							reg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,16}$/,
							msg: this.$t('modify.ruleInfo')
						}
					],


				},
				// 注册验证
				registerRules: {
					username: [{
							required: true,
							msg: this.$t('login.loginOther.nametip')
						},
						{
							reg: /^.{6,}$/,
							msg: this.$t('login.userNameError')
						}
					],

					password: [{
							required: true,
							msg: this.$t('login.loginOther.passtip')
						},
						{
							reg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,16}$/,
							msg: this.$t('modify.ruleInfo')
						}
					],
					inviteCode: [{
						required: true,
						msg: this.$t('login.loginOther.ruletip')
					}],

				},
				// 账号登录验证
				loginRules: {
					username: [{
						required: true,
						msg: this.$t('login.loginOther.nametip')
					}],
					password: [{
						required: true,
						msg: this.$t('login.loginOther.passtip')
					}]
				},
				//手机号登录验证
				loginRules1: {
					phone: [{
						required: true,
						msg: this.$t('login.loginOther.phonetip')
					}],
					password: [{
						required: true,
						msg: this.$t('login.loginOther.passtip')
					}]
				},
				// 第三方信息
				otherInfo: {
					name: '',
					userName: '',
					status: false,
					code: ''
				},
				// 打开app
				openAppTitle: false,

				// 客服弹窗
				customerServiceShow: false,
				urlList: ['https://www.baidu.com/', 'https://www.baidu.com/',  'https://www.baidu.com/'],
				//绑定手机号弹窗
				showBindingPhone: false,
				//绑定邮箱弹窗
				showBindingMail: false,
			};
		},
		onshow() {
			this.$u.vuex('vuex_current_tabbar', 0);
		},
		watch: {
			'registerData.username'(newValue, oldValue) {
				console.log(newValue.substr())
				if (newValue.substr() !== '%' && newValue.substr() !== '?' && newValue.substr() !== '#' && newValue) {
					this.$u.post('/app/user/check/username/' + newValue, {}).then((res) => {
						if (res.data && this.registerData.username) {
							this.checkName = 1
						} else if (!(res.data) && this.registerData.username) {
							this.checkName = 2
						}
					});
				} else {
					this.checkName = 0
				}

			},
			'forgetData.username'(newValue, oldValue) {

				if (newValue.substr() !== '%' && newValue.substr() !== '?' && newValue.substr() !== '#' && newValue) {
					this.$u.post('/app/user/getUser/phone/' + newValue, {}).then((res) => {
						if (res.data.mobile.length > 0 && res.data.email.length > 0) {
							if (this.forgetType == 'true') {
								let array = res.data.mobile.split('-');
								this.phoneAreaNumber = Number(array[0]);
								this.phoneNumber = array[1];
							} else {
								this.forgetData.email = res.data.email
							}
							this.forgetCheckName = 0
						} else {
							this.phoneAreaNumber = 1
							this.phoneNumber = ''
							this.forgetCheckName = 1
						}

					});
				} else {
					this.forgetCheckName = 0
				}

			},

		},
		// type：当前是注册或者登录，iCode注册邀请码
		onLoad(data) {
			
			if (this.loginTabActive == 0) {
				if (uni.getStorageSync('remeberPwd')) {
					this.rememberPwd = true
					this.loginData = uni.getStorageSync('remeberPwd')
				}
			} else if (this.loginTabActive == 1) {
				if (uni.getStorageSync('remeberPhone')) {
					this.rememberPwd = true
					let loginData = uni.getStorageSync('remeberPhone')

					let array = loginData.phone.split('-');
					this.phoneAreaNumber = Number(array[0]);
					this.loginData.phone = array[1]
					this.loginData.password = loginData.password

				}

			}

			this.registerData.avatar = this.vuex_userDefaultTopImg
			if (data.code) {
				this.otherInfo.code = data.code;
				this.otherLogin('google', data);
			}
			if (data.type) {
				this.activeFormType = data.type;
				if (data.iCode) {
					this.registerData.inviteCode = data.iCode;
				}

				// #ifdef H5
				if (data.open) {
					this.openAppTitle = true;
				}
				// #endif
			
				return bottomTipListOther.find((f) => f.type === this.activeFormType);
			}
			this.$u.get('/app/language/text/info/c8989ecfb04442ee83e921dcbcc206f6').then((res) => {
				this.forgetContent = res.data
			});
			this.$u.post('/app/h2-sys-config/getConfigKey/verifyBoolean').then((res) => {
				this.forgetType = res.data
			});
			this.$u.post('/app/h2-sys-config/getConfigServiceAddress').then((res) => {
				this.urlList = res.data
			});
		},

		computed: {
			pwdStrength() {
				return this.strength == 1 ? this.$t('login.Low') :
					this.strength == 2 ? this.$t('login.Medium') :
					this.strength == 3 ? this.$t('login.Strong') :
					this.$t('login.Password_strength');
			},
			// 当前底部提示语及链接
			activeBottomTip() {
				let bottomTipListOther = [{
						tip: this.$t('login.bottomTipList[0].tip'),
						link: this.$t('login.bottomTipList[0].link'),
						type: 'login',
						linkType: 'register'
					},
					{
						tip: this.$t('login.bottomTipList[1].tip'),
						link: this.$t('login.bottomTipList[1].link'),
						type: 'register',
						linkType: 'login'
					},
					{
						tip: this.$t('login.bottomTipList[1].tip'),
						link: this.$t('login.bottomTipList[1].link'),
						type: 'bindingMail',
						linkType: 'login'
					},
					{
						tip: this.$t('login.bottomTipList[1].tip'),
						link: this.$t('login.bottomTipList[1].link'),
						type: 'bindingPhone',
						linkType: 'login'
					},
					{
						tip: this.$t('login.bottomTipList[1].tip'),
						link: this.$t('login.bottomTipList[1].link'),
						type: 'forget',
						linkType: 'login'
					}
				];
				return bottomTipListOther.find((f) => f.type === this.activeFormType);
			}
		},
		methods: {
			handleInput(e) {
				let hasNumber = /\d/.test(e); // 是否包含数字
				let hasLowercase = /[a-z]/.test(e); // 是否包含英文小写字母
				let hasUpcase = /[A-Z]/.test(e); // 是否包含英文大写字母
				if (e.length < 5) {
					this.strength = 1
				}
				if (e.length > 4) {
					this.strength = 2
				}
				if (e.length > 8) {
					this.strength = 3
				}

				if (!hasUpcase) { // 检查密码是否包含大写字母
					this.strength = 1
				} else if (!hasLowercase) { // 检查密码是否包含小写字母
					this.strength = 1
				} else if (!hasNumber) { // 检查密码是否包含数字
					this.strength = 1
				}
				if (hasNumber && hasLowercase && e.length > 4) { //包含小写和数字
					this.strength = 2
				}
				if (hasUpcase && hasNumber && e.length > 4) { //包含大写和数字
					this.strength = 2
				}
				if (hasUpcase && hasLowercase && e.length > 4) { //包含大写和小写
					this.strength = 2
				}
				if (hasUpcase && hasLowercase && hasNumber && e.length > 8) {
					this.strength = 3
				}
				if (e.length == 0) {
					this.strength = 0
				}
			},
			//是否记住密码
			checkboxGroupChange() {
				console.log(this.rememberPwd)
			},
			//是否同意用户协议。。。
			isagree() {
				console.log(this.isagreeCheck)
			},
			isagreeView(type) {
				if (type == 1) {
					this.isShow = true
					this.$u.get('/app/language/text/info/0ddc8f6d07104bc7a13d5fbab16efc9f').then(res => {
						let content = res.data
						this.contentName = this.$t('login.user_agreement')
						this.contentTitle = content.split('：')[0]
						this.contentMain = content.split('：')[1]
					})
				} else if (type == 2) {
					this.isShow = true
					this.$u.get('/app/language/text/info/dcc339a1177149f0b75d4fe146fff20f').then(res => {
						let content = res.data
						this.contentName = this.$t('login.privacy_policy')
						this.contentTitle = content.split('：')[0]
						this.contentMain = content.split('：')[1]
					})
				}
			},
			//选择登录方式
			loginTab(index) {
				this.loginTabActive = index
				if (this.loginTabActive == 0) {
					if (uni.getStorageSync('remeberPwd')) {
						this.rememberPwd = true
						this.loginData = uni.getStorageSync('remeberPwd')
					} else {
						this.rememberPwd = false
						this.loginData = {}
					}
				} else if (this.loginTabActive == 1) {
					if (uni.getStorageSync('remeberPhone')) {
						this.rememberPwd = true
						let loginData = uni.getStorageSync('remeberPhone')
						let array = loginData.phone.split('-');
						this.phoneAreaNumber = Number(array[0]);
						this.loginData.phone = array[1]
						this.loginData.password = loginData.password
					} else {
						this.rememberPwd = false
						this.loginData = {}
					}
				}
			},
			asss(e) {
				console.log(e);
				this.phoneAreaNumber = Number(e);
			},

			getValue(e) {
				console.log(e)
				this.form.zhiweiId = e.zhiweiId
			},
			onchange(e) {
				const value = e.detail.value
			},

			confirmArea(e) {
				console.log(e);
				this.phoneAreaNumber = e[0].value;
			},
			//获取国际区号
			getAreaCode() {
				this.$u.get('/app/user/getInternationalTelephoneAreaCode').then((res) => {
					console.log('quhao', res);
					this.countries = res.data

				});
			},
			// 头像上传
			changeAvatar() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						let filePath = rst.tempFiles[0].path;
						let filename = filePath.substr(filePath.lastIndexOf('/') + 1);
						COS.uploadFileToTencentClound(filename, filePath, 'user_top').then((res) => {
							that.registerData.avatar = res.split(
								`${process.uniEnv.COSBucket}.cos.${process.uniEnv.COSRegion}.myqcloud.com/`)[1]
							console.log(that.$u.file.getMedieUrl(that.registerData.avatar))
						})

					}
				});

			},
			//找回密码
			forgetAjax() {
				if (this.forgetType == 'true') {
					if (this.phoneNumber) {
						if (typeof this.phoneAreaNumber === 'number') {
							this.forgetData.phone = this.phoneAreaNumber + '-' + this.phoneNumber;

						} else {
							this.$u.toast(this.$t('storeManagement.selectNumber'));
							return false
						}
					} else {
						this.$u.toast(this.$t('storeManagement.fillMobile'));
						return false
					}
					if (!this.forgetData.smsCode) {
						this.$u.toast(this.$t('storeManagement.verificationNull'));
						return false
					}
				} else {
					if (!this.forgetData.email) {
						this.$u.toast(this.$t('storeManagement.fillEmail'));
						return false
					}
					if (!this.forgetData.emailCode) {
						this.$u.toast(this.$t('storeManagement.verificationNull'));
						return false
					}
				}

				if (this.forgetData.password !== this.forgetData.rePassword) {
					this.$u.toast(this.$t('modify.passwordNosee'));
					return;

				}
				
				this.$u.post('/app/user/change/password', this.forgetData).then((res) => {
					this.$refs.promptDialog.show({
						des: this.$t('login.loginOther.logIn'),
						title: this.$t('login.loginOther.findSuccessfully'),
						confirm: (c) => {
							// 自动填充密码
							this.loginData = {
								...this.forgetData
							};
							setTimeout(() => {
								this.activeFormType = 'login';
							}, 500);
							c();
						},
						close: () => {
							this.resetData('forgetData');
						}
					});
				});
			},
			//忘记密码
			forgetPsw() {

				this.$refs.areaCode.changeNumber(1)
				this.activeFormType = 'forget';
				this.phoneAreaNumber = 1;
				this.forgetData.email = '';
				this.forgetData.userna = '';
				this.forgetData.password = '';
				this.forgetData.rePassword = '';
				this.forgetData.smsCode = '';
				this.forgetData.emailCode = '';
				this.phoneNumber = ''
				console.log(111);
			},

			goUserCenter() {
				uni.switchTab({
					url: '/pages/user/user',
					animationType: 'slide-in-bottom	',
					animationDuration: 200
				});
			},
			goBack() {
				this.publicJS.backOption();
			},
			//客服聊天
			clickService() {
				this.customerServiceShow = true
			},
			// 输入框输入事件
			changeInput(item) {
				// console.log(item.key);
				// if (item.key === 'inviteCode') {
				// 	this.registerData = {
				// 		inviteCode: 6
				// 	}
				// }
			},
			bottomSubmit() {
				switch (this.activeFormType) {
					case 'login':
						const {
							status: status1, msg: msg1
						} = this.publicJS.validate(this.loginTabActive == 0 ? this.loginRules : this.loginRules1, this
							.loginData);
						if (status1) {
							if (this.loginTabActive == 0) {
								if (this.rememberPwd == true) {
									uni.setStorageSync('remeberPwd', this.loginData)
								} else {
									uni.removeStorageSync('remeberPwd')
								}
							}

							this.loginAjax();
						}
						break;
					case 'register':
						const {
							status, msg
						} = this.publicJS.validate(this.registerRules, this.registerData);
						if (status) {
							if (this.isagreeCheck == true) {
								this.registerAjax();
							} else {
								this.$u.toast(this.$t('login.service_agreement'));
							}
						}
						break;
					case 'forget':
						const {
							status: status2, msg: msg2
						} = this.publicJS.validate(this.forgetRules, this.forgetData);
						if (status2) {
							this.forgetAjax();
						}
						break;
					default:
						break;
				}
			},
			// 表单类型切换
			formTypeChange(type) {
				// this.phoneAreaNumber = this.$t('storeManagement.chooseNumber')
				// this.$refs.areaCode2.changeNumber(this.$t('storeManagement.chooseNumber'))
				this.phoneNumber = ''
				// this.$promptDialog()
				// this.resetData(type !== 'login' ? 'loginData' : 'registerData');
				this.activeFormType = type;
			},
			// 注册接口
			registerAjax() {
				// if (!this.phoneNumber) {
				// 	this.$u.toast(this.$t('login.loginOther.phonetip'));
				// 	return
				// }
				// if (typeof this.phoneAreaNumber === 'number') {
				// 	this.registerData.phone = this.phoneAreaNumber + '-' + this.phoneNumber;

				// } else {
				// 	this.$u.toast(this.$t('storeManagement.selectNumber'));
				// 	return
				// }
				this.$u.post('/app/user/register', {
						...this.registerData,
						inviteCode: this.registerData.inviteCode.toUpperCase(), // 大小写任意-统一转为大写
						googleAccount: this.otherInfo.name === 'google' ? this.otherInfo.uniqueId : null,
						facebookAccount: this.otherInfo.name === 'facebook' ? this.otherInfo.uniqueId : null,

					})
					.then((res) => {
						this.showBindingPhone = true
						this.bindData.username = this.registerData.username
						this.bindData.password = this.registerData.password
					});
			},
			BindingPhone() {
				this.showBindingPhone = false
				this.activeFormType = 'bindingPhone'
			},
			BindingMail() {
				this.showBindingMail = false
				this.activeFormType = 'bindingMail'
			},
			BindingPhone_create() {
				if (typeof this.phoneAreaNumber !== 'number') {
					this.$u.toast(this.$t('storeManagement.selectNumber'));
					return

				}
				this.$u.post('/app/user/userBindingPhone', {
						"username": this.bindData.username,
						"phone": this.phoneAreaNumber + '-' + this.bindData.phone,
						"smsCode": this.bindData.smsCode

					})
					.then((res) => {
						this.showBindingMail = true
					});
			},
			BindingMail_create() {

				this.$u.post('/app/user/userBindingMail', {
						"username": this.bindData.username,
						"email": this.bindData.email,
						"emailCode": this.bindData.emailSmsCode

					})
					.then((res) => {
						this.EnterMall()
					});
			},
			// 进入商城
			EnterMall() {
				this.$u
					.post('/app/login', {
						...this.bindData
					})
					.then((res) => {
						uni.setStorageSync('remeberPwd', this.bindData)

						this.loginSuccsee(res.data);
					});

			}, // 登录接口
			loginAjax() {
				if (this.loginTabActive == 0) {
					this.$u
						.post('/app/login', {
							...this.loginData
						})
						.then((res) => {
							this.loginSuccsee(res.data);
						});
				} else {
					if (typeof this.phoneAreaNumber !== 'number') {
						this.$u.toast(this.$t('storeManagement.selectNumber'));
						return

					}
					this.$u
						.post('/app/login', {
							username: this.phoneAreaNumber + '-' + this.loginData.phone,
							password: this.loginData.password
						})
						.then((res) => {
							if (this.loginTabActive == 1) {
								console.log(123)

								if (this.rememberPwd == true) {
									uni.setStorageSync('remeberPhone', {
										...this.loginData,
										phone: this.phoneAreaNumber + '-' + this.loginData.phone
									})
								} else {
									uni.removeStorageSync('remeberPhone')
								}
							}
							this.loginSuccsee(res.data);
						});
				}

			},
			// 重置数据
			resetData(dataKey) {
				console.log(dataKey)
				if (dataKey == 'loginData') {
					this.phoneAreaNumber = 1
					let newData = {};
					for (var key in this[dataKey]) {
						newData[key] = '';
					}
					if (newData.username = ' ') {
						if (this.loginTabActive == 0) {
							newData = uni.getStorageSync('remeberPwd')
						} else if (this.loginTabActive == 1) {
							newData = uni.getStorageSync('remeberPhone')
						}
					}
					console.log(this[dataKey])
					this[dataKey] = newData;
				}

			},
			//切换
			languageChange(item) {
				this.languageVal = item.code;
				if (this.vuex_is_android) {
					//#ifndef H5
					uni.showModal({
						content: this.$t('local.languageChangeConfirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(item.code);
							}
						}
					});
					//#endif
					uni.setLocale(item.code);
					this.$i18n.locale = item.code;
				} else {
					uni.setLocale(item.code);
					this.$i18n.locale = item.code;
				}
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			openApp() {
				window.location.href = 'livesapp://pages/login/login?type=register&iCode=' + this.registerData.inviteCode;
			},
			// 登录成功处理
			loginSuccsee(token) {
				uni.setStorageSync('vuex_token', token);
				this.$u.vuex('vuex_token', token);
				this.resetData('loginData');
				this.$u.init.getUserInfo(token);
				this.$u.vuex('vuex_current_tabbar', 0);
				uni.switchTab({
					url: '/pages/home/home'
				});
			},
			// 第三方登录
			otherLogin(key, data) {
				switch (key) {
					case 'google':
						this.$u.get('/app/googleLogin', {
								code: data.code || data.uniqueId
							})
							.then((res) => {
								this.otherLoginFAfterHandel({
									...res.data,
									...data,
									name: 'google'
								});
							});
						break;
					case 'facebook':
						this.$u.get("/app/facebookLogin", data).then(res => {
							this.otherLoginFAfterHandel({
								...res.data,
								name: 'facebook'
							});
						}).catch(() => {})
						break;
					default:
						break;
				}
			},
			// 第三方登录结束后处理
			otherLoginFAfterHandel(data) {
				// data.token = ''
				if (data.token) {
					this.loginSuccsee(data.token);
				} else {
					this.otherInfo = {
						...data,
						userName: data.user,
						status: true,
					}
					this.otherInfo.userName = data.user;
					this.otherInfo.status = true;
					this.otherInfo.name = data.name;
					this.registerData.googleAccount = data.uniqueId;
					if (this.activeFormType !== 'register') {
						this.$refs.promptDialog.show({
							des: this.$t('login.loginOther.toRegistere').replace("${slot}", data.name),
							title: this.$t('system.Hint'),
							confirm: (c) => {
								// 设置表单类型并传入用户邮箱
								this.activeFormType = 'register';
								c();
							}
						});
					}
				}
			},
			// 登录回车
			loginEnter(key) {
				if (key === 'password') {
					this.bottomSubmit();
				} else {
					const ref = this.$refs['password' + 'Input'][0];
					ref.focus();
				}
			},
			// 验证码
			codeChange(text) {
				this.tips = text;
			},
			// 客服外链
			toCustomer(url) {
				// #ifdef H5
				window.location.href = url;
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(url)

				// #endif
			},
			//注册验证码
			getCode() {

				if (this.bindData.phone) {
					if (typeof this.phoneAreaNumber === 'number') {

						if (this.$refs.uCode2.canGetCode) {
							uni.showLoading({
								title: this.$t('storeManagement.verification')
							});
							this.$u.post(`/app/user/sendMessage/1/${this.phoneAreaNumber + '-' + this.bindData.phone}`)
								.then((res) => {
									console.log(res.data);
									// this.registerData.cmsCode=res.data
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									this.$u.toast(this.$t('storeManagement.verificationSent'));
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode2.start();
								}).catch(e => {
									uni.hideLoading();
								});
						} else {
							this.$u.toast(this.$t('storeManagement.countdownOver'));
						}
					} else {
						this.$u.toast(this.$t('storeManagement.selectNumber'));
					}
				} else {
					this.$u.toast(this.$t('storeManagement.fillMobile'));
				}
			},

			//注册邮箱验证
			getCode3() {

				if (this.$refs.uCode3.canGetCode) {
					uni.showLoading({
						title: this.$t('storeManagement.verification')
					});
					let email=''
					email=this.activeFormType=='forget'?this.forgetData.email:this.bindData.email
					if (!email) {
						this.$u.toast(this.$t('storeManagement.fillEmail'));
						return false
					}
					this.$u.post(`/app/user/sendMail/${email}`)
						.then((res) => {
							console.log(res.data);
							// this.registerData.cmsCode=res.data
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast(this.$t('storeManagement.verificationSent'));
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode3.start();
						}).catch(e => {
							uni.hideLoading();
						});
				} else {
					this.$u.toast(this.$t('storeManagement.countdownOver'));
				}
			},
			//忘记密码验证码
			getCode2() {
				if (this.phoneNumber) {
					if (typeof this.phoneAreaNumber === 'number') {
						this.forgetData.phone = this.phoneAreaNumber + '-' + this.phoneNumber;
						console.log(111, this.forgetData.phone);
						if (this.$refs.uCode.canGetCode) {
							uni.showLoading({
								title: this.$t('storeManagement.verification')
							});
							this.$u.post(`/app/user/sendMessage/${this.forgetData.type}/${this.forgetData.phone}`).then((
								res) => {
								console.log(res.data);
								// this.registerData.cmsCode=res.data
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast(this.$t('storeManagement.verificationSent'));
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							});
						} else {
							this.$u.toast(this.$t('storeManagement.countdownOver'));
						}
					} else {
						this.$u.toast(this.$t('storeManagement.selectNumber'));
					}
				} else {
					this.$u.toast(this.$t('storeManagement.fillMobile'));
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.login-page {
		height: 100vh;
		background-color: #1b1d29;
		padding: 0 40rpx;
		overflow: auto;

		/deep/ .cl-status__bar {
			width: 100% !important;
		}

		.open-app {
			z-index: 1000;
			display: flex;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(208, 206, 208, 0.5);
			width: 100vw;
			height: 50rpx;
			padding: 0 40rpx;
			align-items: center;
			color: #ffffff;
			justify-content: space-between;

			.open-btn {
				margin: 0;
				height: 80%;
				width: 80rpx;
				border-radius: 6rpx;
				font-size: 26rpx;
			}
		}

		// 登录头部
		.login-header {
			// position: relative;
			padding-top: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.login-logo {
				text-align: center;

				text {
					font-size: 48rpx;
					line-height: 58rpx;

					&.while {
						color: #fff;
					}

					&.blue {
						color: rgba(41, 52, 208, 1);
					}
				}
			}

			.customer-service-logo {
				// position: absolute;
				// right: 8rpx;
				// top: 50%;
				// transform: translate(0, -50%);
			}

			.nav-back {
				// position: absolute;
				// left: 0rpx;
			}
		}

		.login-main {
			position: relative;

			.login-form {
				overflow: hidden;
				margin-top: 58rpx;
				margin-bottom: 86rpx;
				border-radius: 48rpx;
				background-color: #fff;
				padding: 60rpx 40rpx 0;
				position: relative;
				z-index: 4;

				// 登录注册都有的提示部分
				.title-text {
					display: flex;
					justify-content: space-between;

					.tips-text {
						font-size: 48rpx;
						font-weight: 500;
						width: 100%;

						.register-text {
							display: flex;
							justify-content: space-between;

							.other-dex {
								font-size: 28rpx;
								color: #1b1d29;
								line-height: 42rpx;

								.other-name {
									font-size: 32rpx;
									padding-left: 12rpx;
								}
							}
						}
					}

					.select {
						margin-top: 26rpx;
					}
				}

				// 输入框下边距公共样式
				.input-box {
					&:not(:last-child) {
						margin-bottom: 28rpx;
					}

					&::after {
						border: none;
					}
				}

				.form-login {
					padding: 98rpx 0 86rpx 0;
				}

				.form-reigster {
					padding: 52rpx 0 30rpx 0;
				}

				.handel-button {
					height: 120rpx;
					background: #2934d0;
					border-radius: 20rpx;
					line-height: 120rpx;
					color: #fff;
					font-size: 32rpx;
				}
			}
		}

		// 登录框

		.switchover-form-text {
			position: absolute;
			text-align: center;
			line-height: 86rpx;
			bottom: -86rpx;
			left: 0rpx;
			width: calc(100% - 52rpx);
			margin: 0 26rpx;
			height: 102rpx;
			background: #ffffff;
			border-radius: 0rpx 0rpx 48rpx 48rpx;
			z-index: 2;

			.shadow-box {
				height: 10rpx;
				width: 100%;
				box-shadow: 0px 7px 6px 1px rgba(41, 52, 208, 0.16);
				z-index: 2;
			}

			span {
				color: #2934d0;
			}
		}

		.login-with {
			text-align: center;
			font-size: 28rpx;
			line-height: 32rpx;
			color: #91909a;
			padding-top: 64rpx;
		}
	}

	.forget {
		color: #2934d0;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 60rpx 0 60rpx 0;
	}

	.forgetTittle {
		color: #171717;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 48rpx;
		margin-bottom: 40rpx;
		// width: 300rpx;
	}

	.forgetContent {
		color: #b6b6b6;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
	}

	.customerServiceBox {
		height: 100%;
		padding: 40rpx;
		flex-wrap: wrap;
		color: #fff;
		background: #1b1d29;

		.iconBox {
			width: 120rpx;
			height: 120rpx;
			margin: 20rpx auto;
			/* text-align: center; */
			/* line-height: 100px; */
			display: flex;
			justify-content: center;
			align-items: center;
			background: #2979ff;
			border-radius: 50%;
		}

	}

	.loginTab {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding-bottom: 60rpx;

		.loginTabItem {
			width: 280rpx;
			height: 64rpx;
			line-height: 64rpx;
			background-color: #F5F6F8;
			color: #91909A;
			border-radius: 20rpx;
		}

		.loginTabItem.active {
			background-color: #2934D0;
			color: #fff;
		}
	}

	.isagree {
		display: flex;
		justify-content: start;
	}

	.areaCodeBox {
		border: 1px solid #E8E6EA;
		padding: 42rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 24rpx;
		text-align: center;
		position: relative;

		.areaCodeText {
			font-family: SFUIDisplay-Regular, SFUIDisplay;
			position: absolute;
			top: -20rpx;
			left: 20rpx;
			font-size: 26rpx;
			color: #999cad;
			background-color: #fff;
			padding: 0 10rpx;
		}
	}

	.strengthBox {
		display: flex;

		.strengthItem {
			width: 60rpx;
			height: 35rpx;
			background-color: #EBECF2;
		}

		.strengthItem.strengthItem0 {
			border-radius: 173rpx 0rpx 0rpx 173rpx;
			margin-right: 5rpx;
		}

		.strengthItem.strengthItem1 {
			margin-right: 5rpx;
		}

		.strengthItem.strengthItem2 {
			border-radius: 0rpx 173rpx 173rpx 0rpx;
		}

		.strengthItemWeak {
			background: #FEEFD0;
		}

		.strengthItemMiddle {
			background: #97DB77;
		}

		.strengthItemStrong {
			background: #51C419;
		}
	}

	.popBox {
		padding: 50rpx;
		text-align: center;

		.popMessage {
			font-size: 32rpx;
			font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
			font-weight: 400;
			color: #1B1D29;
			line-height: 56rpx;

		}
	}
</style>